<template>
	<view class="content">
		<uni-swiper-dot :info="swiperItem" :current="current" :mode="mode" :dots-styles="dotsStyles" field="content">
			<swiper class="swiper-box" @change="change" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item v-for="(item ,index) in swiperItem" :key="index" @click="onSwipe(item)">
					<view class="swiper-item">
						<image :src="item.url" mode="aspectFill" />
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<view class="bulletin bsp10">
			<view class="bulletin-left" @click="goheadline">
				<view class="bulletin-left-point-icon"></view>
				<view class="bulletin-left-text">
					公告
				</view>
			</view>
			<view class="bulletin-center">
				<view class="bulletin-center-aibafang" @click="goheadline">爱八方</view>
				<view class="bulletin-center-text-banner">
					<u-notice-bar mode="vertical" :list="list" type="none" :volume-icon="false" duration="3000" fontSize="28" @click="goBulletin_detail"></u-notice-bar>
				</view>
			</view>
		</view>
		
		<view class="home-news">
			<view class="home-news-title">
				<text class="home-news-title-text">
					最新动态
				</text>
				<text class="home-news-title-more" @click="opesNewsList">
					更多 >
				</text>
			</view>
			<news-list :options="newsItem" />
			<mix-load-more :status="loadMoreStatus"></mix-load-more>
		</view>
		<view class="mask_privacy" v-show="is_first" @touchmove.stop.prevent="moveHandle"></view>
		<view class="privacy" v-show="is_first" @touchmove.stop.prevent="moveHandle">
			<template v-if="is_ok">
				<view class="privacy-title">个人信息保护引导</view>
				<view class="privacy-info">
					<view>1.在使用时，我们会收集，使用设备标识信息用于推荐。</view>
					<view>2.你可以查看完整版<text @click="openpage('/pages/privacy/privacy')">《用户协议》</text>和<text @click="openpage('/pages/page/page')">《隐私政策》</text>以便了解我们收集、使用、共享、储存信息的情况，以及对信息的保护措施。</view>
					<view>如果你同意请点击下面的按钮以接受我们的服务。</view>
				</view>
			</template>
			<template v-if="!is_ok">
				<view class="privacy-title">需要同意爱八方系统app用户协议，才可以继续使用</view>
			</template>
			<view class="privacy-btn" v-if="is_ok">
				<text @click="is_ok = false">暂不使用</text>
				<text @click="closeFirst()">同意</text>
			</view>
			<view class="privacy-btn" v-if="!is_ok" @click="is_ok = true">
				下一步
			</view>
		</view>
		<u-back-top :scroll-top="scrollTop" top="600" icon="arrow-up" tips="顶部"></u-back-top>
	</view>
</template>

<script>
	// #ifdef APP-PLUS
	function openVersion(data) {
		console.log(JSON.stringify(data))
		//以下为计算菜单的nview绘制布局，为固定算法，使用者无关关心
		var screenWidth = plus.screen.resolutionWidth
		var screenHeight = plus.screen.resolutionHeight
		var boxWidth = '270';
		var boxLeft = (screenWidth - boxWidth) / 2
		var boxHeight = screenHeight * 0.5 // 屏幕高度大的一半
		if (boxHeight < 350) {
			boxHeight = 350
		}
		if (boxHeight > 430) {
			boxHeight = 400
		}
		var boxTop = screenHeight * 0.5 / 2 // 顶部为四分之一高度

		var nvMask = new plus.nativeObj.View("nvMask", { //先创建遮罩层
			top: '0px',
			left: '0px',
			height: '100%',
			width: '100%',
			backgroundColor: 'rgba(0,0,0,0.2)'
		});


		// 更新方式：autonomous自主，forced强制,Application应用类
		nvMask.addEventListener("click", function() { //处理遮罩层点击
			if (data.update_way == 'forced') { //强制更新
				uni.showToast({
					icon: 'none',
					title: "强制更新版本",
					position: 'bottom'
				})
			} else {
				nvMask.hide();
				nvView.hide();
			}
		})
		var nvView = new plus.nativeObj.View("nvView", { //创建底部图标菜单
			top: boxTop + 'px',
			left: boxLeft + 'px',
			right: '10%',
			height: boxHeight + 'px',
			width: boxWidth + 'px',
			backgroundColor: 'rgb(0,0,0,0)'
		});

		nvView.draw([{
				tag: 'rect', //背景白色
				color: '#ffffff',
				position: {
					width: boxWidth + 'px',
					top: '0px',
					height: boxHeight + 'px',
				},
				rectStyles: {
					radius: '10px'
				}
			},
			{
				tag: 'img',
				id: 'imgwechatfriend',
				src: '/static/vbg.png',
				position: {
					top: '0px',
					left: '0px',
					width: boxWidth + 'px',
					height: 'auto'
				}
			},
			{
				tag: 'rect', //按钮
				id: 'recrBtn',
				position: {
					width: '170px',
					left: '50px',
					right: '50px',
					top: (boxHeight - 80) + 'px',
					height: '40px',
				},
				rectStyles: {
					radius: '100px',
					color: '#ffffff',
					borderColor: '#40b9ef',
					borderWidth: '1px'
				}
			},
			{
				tag: 'font',
				id: 'fontbtn',
				text: '立即更新',
				textStyles: {
					size: '16px',
					align: 'center',
					color: '#e52458'
				},
				position: {
					width: '170px',
					left: '50px',
					right: '50px',
					top: (boxHeight - 80) + 'px',
					height: '40px',
				}
			},
			{
				tag: 'font',
				id: 'fontTips',
				position: {
					top: (boxHeight - 40) + 'px',
					left: '0px',
					width: boxWidth + 'px',
					height: '40px'
				},
				text: '更新新版本获取更多功能',
				textStyles: {
					size: '14px',
					align: 'center',
					color: '#999999'
				}
			},
			{
				tag: 'richtext',
				id: 'tips',
				text: '<p style="text-align:right;font-size:14px;">' + data.update_content + '</p>',
				richTextStyles: {
					size: '16px',
					align: 'center',
					color: '#36aaff'
				},
				position: {
					width: '170px',
					left: '50px',
					right: '50px',
					top: '200px',
					height: '40px',
				}
			}
		])

		nvView.addEventListener("click", function() { //处理点击
			plus.runtime.openURL(data.download_url)
		})

		// 
		nvMask.show()
		nvView.show()
	}


	// #endif

	import {
		mapState,
		mapMutations
	} from 'vuex'

	import newsList from '@/components/news-list/news-list.vue'
	import uniSwiperDot from '@/components/uni-ui/uni-swiper-dot/uni-swiper-dot.vue'
	import uniGrid from '@/components/uni-ui/uni-grid/uni-grid.vue'
	import mixLoadMore from '@/components/mix-load-more/mix-load-more';
	import screenTextScroll from '@/components/p-screenTextScroll/screenTextScroll.vue'


	export default {
		computed: {
			...mapState(['token', 'version', 'versionData'])
		},
		components: {
			uniSwiperDot,
			uniGrid,
			newsList,
			mixLoadMore,
			screenTextScroll
		},
		data() {
			return {
				swiperItem: [],
				modeIndex: -1,
				styleIndex: -1,
				current: 0,
				mode: 'default',
				autoplay: true,
				interval: 2000,
				duration: 500,
				dotsStyles: {
					backgroundColor: 'rgba(255, 255, 255, .5)',
					border: '1px rgba(255, 255, 255, .5) solid',
					color: '#fff',
					selectedBackgroundColor: 'rgba(232, 62, 65, .9)',
					selectedBorder: '1px rgba(232, 62, 65, .9) solid'
				},
				newsItem: [], //	文章数据
				pageCount: 0, // 总页数
				page: 1, // 当前页数
				loadMoreStatus: 0, // 分页状态
				loadingStatus: true, // 加载状态	
				hsbUrl: '',
				ship_num: 0,
				bulletin: [], // 公告
				is_first: false, // 是否首次打开
				is_ok: true, // 点击是否同意
				list:[],
				scrollTop:0,
			}
		},
		onShow() {
			//this.getConfig()
			//显示原生tabbar
			uni.showTabBar()
		},
		onLoad() {
			this.getSwiper()
			this.getHomeNews('add')
			this.getBulletin()


			// #ifdef APP-PLUS
			// 首次打开 弹出 隐私协议政策
			if (!uni.getStorageSync('first')) {
				//uni.hideTabBar()
				this.is_first = true
			}

			// 有更新
			if (this.version) {
				this.showUpdate(this.versionData)
			}
			// #endif

			// 监听网络变化
			uni.onNetworkStatusChange((res) => {
				if (res.isConnected) {
					this.newsItem = []
					this.swiperItem = []
					this.loadMoreStatus = 0
					this.loadingStatus = true
					this.page = 1

					this.getSwiper()
					this.getHomeNews('add')
					this.getBulletin()
					//this.getConfig()
				} else {
					uni.showToast({
						icon: 'none',
						title: "网络已断开",
						position: 'bottom'
					})
				}
			});
		},
		methods: {
			...mapMutations(['getNetworkType', 'vuexRequest']),
			// 同意关闭协议
			closeFirst() {
				uni.showTabBar()
				this.is_first = false
				uni.setStorageSync('first', 'true')
			},
			openpage(url) {
				uni.navigateTo({
					url: url
				});
			},
			change(e) {
				this.current = e.detail.current
			},
			onSwipe(item) {
				// 点击轮播
				//console.log(JSON.stringify(item))
				// 点击轮播
				//console.log(JSON.stringify(item))
				if (item.jump_type == 2) {
					uni.navigateTo({
						url: '/pages/news/page/page?article_id=' + item.jump_link
					});
				} else if (item.jump_type == 1) {
					uni.navigateTo({
						url: '/pages/news/news-info/news-info?article_id=' + item.jump_link
					});
				} else if (item.jump_type == 0) {

					// #ifdef H5
					window.location.href = item.jump_link
					// #endif

					// #ifdef APP-PLUS
					plus.runtime.openWeb(item.jump_link);
					// #endif
				}
			},
			getSwiper() {
				let _this = this
				this.vuexRequest({
					url: '/api/addons/execute?route=adv/index&addon=rf-article',
					method: 'GET',
					data: {
						location_id: '1'
					},
					success: (res) => {
						console.log(res)
						for (let i in res.data.data.list) {
							res.data.data.list[i].url = res.data.data.list[i].cover
							_this.swiperItem.push(res.data.data.list[i])
						}
					},
					fail: (err) => {},
				})
			},
			getBulletin() {
				this.vuexRequest({
					url: '/api/addons/execute?route=article-bulletin/index&addon=rf-article',
					method: 'GET',
					data: {
						page: 1,
						'per-page': 1
					},
					success: (res) => {
						this.list = (res.data.data.list).map(a=>a.title)
						this.bulletinId_list = (res.data.data.list).map(a=>a.id)
					},
					fail: (err) => {},
				})
			},
			goBulletin_detail(index){
				uni.navigateTo({
					url:'/pages/news/bulletin-info/bulletin-info?isFromHome=true&article_id='+this.bulletinId_list[index]
				})
			},
			getHomeNews(type) {
				let _this = this
				if (!this.loadingStatus) { //防止重复请求
					return !1
				}
				//type add 加载更多 refresh下拉刷新
				if (type === 'add') {
					if (this.loadMoreStatus === 2) {
						return;
					}
					this.loadMoreStatus = 1;
				}
				this.loadingStatus = false

				this.vuexRequest({
					url: '/api/addons/execute?route=article/index&addon=rf-article',
					method: 'GET',
					data: {
						position: '1',
						page: this.page,
						'per-page': 6
					},
					success: (res) => {
						let list = res.data.data.list;
						_this.pageCount = res.data.data.pageInfo.pageCount
						this.loadingStatus = true
						if (type === 'refresh') {
							_this.newsItem = []; //刷新前清空数组
						}
						list.forEach(item => {
							_this.newsItem.push(item);
						})
						//下拉刷新 关闭刷新动画
						if (type === 'refresh') {
							uni.stopPullDownRefresh();
						}
						_this.page++
						_this.loadMoreStatus = _this.page > _this.pageCount ? 2 : 0;

					},
					fail: (err) => {},
				})
			},
			showUpdate(data) {
				openVersion(data)
			},
			opesNewsList() {
				uni.navigateTo({
					url: '/pages/news/news-list/news-list'
				});
			},
			goheadline(){
				uni.navigateTo({
					url:'/pages/news/bulletin-list/bulletin-list'
				})
			}
		},
		onPullDownRefresh() {
			this.page = 1
			this.loadMoreStatus = 0
			this.getHomeNews('refresh')
		},
		onReachBottom() {
			this.getHomeNews('add')
		},
		watch: {
			version() {
				// 有更新
				
				if (this.version) {
					this.showUpdate(this.versionData)
				}
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		}
	}
</script>

<style>
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
	}

	.home-news {
		background: #FFFFFF;
	}

	.home-news-title:before {
		position: absolute;
		z-index: 10;
		right: 0;
		bottom: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		-ms-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}

	.home-news-title {
		position: relative;
		padding: 20upx;
		box-sizing: border-box;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
	}

	.home-news-title-text {
		color: #e83e41;
		font-size: 36upx;
	}

	.home-news-title-more {
		color: #bababa;
	}

	view {
		font-size: 28upx;
		line-height: inherit
	}

	.home-nav {
		padding: 20upx 10upx;
		color: #686868;
		background: #FFFFFF;
	}

	.example {
		padding: 0 30upx 30upx
	}

	.example-title {
		font-size: 32upx;
		line-height: 32upx;
		color: #777;
		margin: 40upx 25upx;
		position: relative
	}

	.example .example-title {
		margin: 40upx 0
	}

	.example-body {
		padding: 0 40upx
	}

	.swiper-box {
		height: 346upx;
	}

	.swiper-item {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		background: #eee;
		color: #fff;
	}

	.swiper-item image {
		width: 100%;
		height: 100%;
	}

	.uni-bg-red {
		background: #ff5a5f;
	}

	.uni-bg-green {
		background: #09bb07;
	}

	.uni-bg-blue {
		background: #007aff;
	}

	.uni-swiper__box {
		margin-top: 30upx;
	}

	.uni-swiper__header {
		padding: 0 30upx;
		font-size: 32upx;
		color: #333;
	}

	.uni-swiper__info {
		display: flex;
		padding: 0 15upx;
	}

	.uni-swiper__info-item {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 15upx;
		height: 60upx;
		width: 100%;
		font-size: 28upx;
		color: #333;
		border: 1px #eee solid;
		border-radius: 10upx;
	}

	.uni-swiper__info-dots {
		width: 16upx;
		height: 16upx;
		border-radius: 50%;
		background: #333333;
		margin-left: 10upx;
		box-sizing: border-box;
	}

	.uni-swiper__info-dots:first-child {
		margin: 0;
	}

	.active {
		border: 1px #000 solid;
	}

	slider {
		width: 100%;
	}

	.mask_privacy {
		background: rgba(0, 0, 0, .3);
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
	}

	.privacy {
		width: 500rpx;
		height: 650rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		position: fixed;
		left: 50%;
		top: 50%;
		margin: -325rpx 0 0 -280rpx;
		padding: 30rpx 30rpx 0 30rpx;
		z-index: 1001;
	}

	.privacy-title {
		text-align: center;
		color: #333333;
		font-size: 32rpx;
		padding: 10rpx 0 30rpx 0;
		font-weight: 600;
	}

	.privacy-info {
		color: #7e7e7e;
		font-size: 24rpx;
	}

	.privacy-info view {
		margin: 0 0 10rpx 0;
	}

	.privacy-info text {
		color: #e93323;
	}

	.privacy-btn {
		color: #e93323;
		font-size: 32rpx;
		font-weight: 600;
		text-align: center;
		position: absolute;
		bottom: 0;
		width: 500rpx;
		line-height: 100rpx;
		height: 100rpx;
		border-top-color: #e0e0e0;
		border-top-width: 1rpx;
		border-top-style: solid;
	}

	.privacy-btn text {
		width: 50%;
		display: inline-block;
		text-align: center;
	}

	.mask {
		background: rgba(0, 0, 0, .3);
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
	}

	.mask-image {
		width: 600rpx;
		height: 375rpx;
	}
	
	/* .bulletin{
		padding: 20rpx;
	}
	
	.bulletin-left{
		width: 15%;
		height: auto;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-right: 2rpx;
	}
	.bulletin-left-point-icon{
		width: 2px;
		height: 2px;
		background-color: #e2041b;
		border-radius:50% ;
		box-shadow: 0 0 1px 1px #e2041b;
		animation:flash 3s linear infinite ;
		margin-right: 4rpx;
	}
	@keyframes flash{
		0%{box-shadow: 0 0 1px 1px #e2041b;}
		50%{box-shadow: 0 0 3px 2px #e2041b;}
		100%{box-shadow: 0 0 1px 1px #e2041b;}
	}
	.bulletin-left-text{
		font-size: 18px;
		font-weight: bold;
		color: #000000;
		letter-spacing: 2px;
	}
	
	.bulletin-center{
		flex:1;
	}
	.bulletin-content{
		flex: 1;
		width: 505rpx;
		height: 100%;
	}
	.u-notice-bar.u-type-none-light-bg{
		padding: 0 !important;
	} */
	
	.bulletin{
		width: 100%;
		height: auto;
		background: #FFFFFF;
		margin: 0 0 20upx 0;
		padding: 20rpx;
		display: flex;
		justify-content: start;
		align-items: center;
		position: relative;
	}
	.bulletin-left{
		width: 15%;
		height: auto;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding-right:6rpx ;
		border-right: 2px solid #aaaaaa;
		margin-right: 6rpx;
	}
	.bulletin-left-point-icon{
		width: 4rpx;
		height: 4rpx;
		background-color: #e2041b;
		border-radius:50% ;
		box-shadow: 0 0 1px 1px #e2041b;
		animation:flash 3s linear infinite ;
	}
	@keyframes flash{
		0%{box-shadow: 0 0 1px 1px #e2041b;}
		50%{box-shadow: 0 0 3px 2px #e2041b;}
		100%{box-shadow: 0 0 1px 1px #e2041b;}
	}
	.bulletin-left-text{
		font-size: 18px;
		font-weight: bold;
		color: #000000;
		letter-spacing: 2px;
	}
	.bulletin-center{
		flex:1;
		height: auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.bulletin-center-aibafang{
		width: auto;
		height: auto;
		font-size: 14px;
		font-weight: bold;
		color: #e2041b;
		margin: 0 4rpx;
	}
	.bulletin-center-text-banner{
		flex:1;
		height: auto;
		overflow: hidden;
		box-sizing: border-box;
		border-radius: 10rpx;
	}
	.bulletin-center-text-banner-item{
		box-sizing: border-box;
		display: inline-block;
		width: 100%;
		height: 40rpx;
		line-height: 40rpx;
		font-size: 24rpx;
		font-weight: bold;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		vertical-align:middle;
		color: #000000;
		background-color: #fff;
		padding: 0;
	}
	.bulletin-right{
		width: 126rpx;
		height: auto;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
	}
	.bulletin-right-text{
		font-size: 22rpx;
		font-weight: bold;
		color: rgba(0,0,0,.5);
	}
	.bulletin-right-icon{
		width: 15px;
		height: 15px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
